<template>
  <div class="pageable-box">
    <com-scroll-bar
      v-if="scrollEnable"
      class="pageable-scrollbar"
      @change="$emit('drag-change', $event)"
    />
    <div class="pageable-box-attach pageable-box-left">
      <span>共{{totalCount}}条<span v-if="selectedCount > 0">, 已选{{selectedCount}}条</span></span>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="totalCount"
      :page-size="pageSize"
      :current-page="pageNum"
      @current-change="onPageChange"
    >
    </el-pagination>
    <div class="pageable-box-attach pageable-box-right">
      <el-select
        size="small"
        class="page-size-select"
        :value="pageSize"
        :placeholder="placeholder"
        @change="onPageSizeChange"
      >
        <el-option
          v-for="item in pageSizeOptions"
          :key="item.code"
          :label="item.name"
          :value="item.code"
        ></el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import ComScrollBar from '../ComScrollBar';

export default {
  name: 'ComPageable',
  components: {
    ComScrollBar
  },
  props: {
    // 总条目数量
    totalCount: {
      type: Number,
      default: 0
    },
    // 当前页
    pageNum: {
      type: Number,
      default: 0
    },
    // 页面大小
    pageSize: {
      type: Number,
      default: 0
    },
    // 已选列表条目数
    selectedCount: {
      type: Number,
      default: 0
    },
    scrollEnable: {
      type: Boolean,
      default: false
    },
	placeholder:{
		type:String,
		default:''
	}
  },
  data() {
    return {
      pageSizeOptions: [
        { code: 10, name: '10条/页' },
        { code: 20, name: '20条/页' },
        { code: 40, name: '40条/页' },
        { code: 80, name: '80条/页' }
      ]
    }
  },
  methods: {
    onPageChange(page) {
      this.$emit('page-change', page);
    },
    onPageSizeChange(size) {
      this.$emit('size-change', size);
    }
  },
  mounted() {

  }
};
</script>

<style scoped lang="less">
@import '../style/config';
.pageable-box {
  width: 100%;
  height: 54px;
  padding-top: 6px;
  box-sizing: border-box;
  position: relative;
  .flexible(row, center, space-between);

  &-attach {
    width: 200px;
  }

  &-left {
    .font-semi(14px, #2E2E2E);
  }

  &-right {
    .flexible(row, center, flex-end);
  }

  .page-size-select {
    width: 100px;
  }

  .pageable-scrollbar {
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>
